import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

/*
  一般组件 正常的 props 中时没有路由组件的一些对象的  只有父组件传递的对象
    但是当一般组件要编程式路由跳转的时候 就得用到 withRouter 这个函数

    这个函数传递一个组件 返回一个加工过的组件

    这样加工一下 一般组件就拥有了路由组件的那些属性  同时还可以继续使用组件传值
*/ 

class Header extends Component {

  goBack = ()=>{
    this.props.history.goBack()
  }

  goForward = ()=>{
    this.props.history.goForward()
  }

  render() {
    console.log('经过withRouter处理过后的一般组件接收的参数',this.props)
    return (
      <div>
        <h3>React-Router-Demo</h3>
        <button onClick={this.goBack}>回退</button>
        <button onClick={this.goForward}>前进</button>
      </div>
    )
  }
}

export default withRouter(Header)